<script>
import PersonnelInformationCard from "./personnelInformationCard.vue";

export default {
  name: "selectPeoplePopupWindow",
  components: {PersonnelInformationCard},
  props: {
    relationshipsThatCanBeAdded: {
      type: Array,
      default: () => {
        return []
      }
    },
    addPersonnelInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    fuqinHead() {
      let str = ''
      this.relationshipsThatCanBeAdded.forEach(item => {
        if (item.val == 6) {
          str = item.head
        }
      })
      return str
    },
    muqinHead() {
      let str = ''
      this.relationshipsThatCanBeAdded.forEach(item => {
        if (item.val == 7) {
          str = item.head
        }
      })
      return str
    },
    qiziHead() {
      let str = ''
      this.relationshipsThatCanBeAdded.forEach(item => {
        if (item.val == 0) {
          str = item.head
        }
      })
      return str
    },
    zhifuHead() {

      let str = ''
      this.relationshipsThatCanBeAdded.forEach(item => {
        if (item.val == 1) {
          str = item.head
        }
      })
      return str
    },
    gegeHead() {

      let str = ''
      this.relationshipsThatCanBeAdded.forEach(item => {
        if (item.val == 2) {
          str = item.head
        }
      })
      return str
    },
    didiHead() {
      let str = ''
      this.relationshipsThatCanBeAdded.forEach(item => {
        if (item.val == 3) {
          str = item.head
        }
      })
      return str
    },
    jiejieHead() {
      let str = ''
      this.relationshipsThatCanBeAdded.forEach(item => {
        if (item.val == 4) {
          str =  item.head
        }
      })
      return str
    },
    meimeiHead() {
      let str = ''
      this.relationshipsThatCanBeAdded.forEach(item => {
        if (item.val == 5) {
          str = item.head
        }
      })
      return str
    },
    erziHead() {

      let str = ''
      this.relationshipsThatCanBeAdded.forEach(item => {
        if (item.val == 8) {
          str = item.head
        }
      })
      return str
    },
    nverHead() {
      let str = ''
      this.relationshipsThatCanBeAdded.forEach(item => {
        if (item.val == 9) {
          str = item.head
        }
      })
      return str
    }
  },
  methods: {
    open() {
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    addMember(info = {}) {
      this.$emit('addMember', info)
    }
  }
}
</script>

<template>
  <uni-popup ref="popup">
    <view class="selectPeoplePopupWindow" @click.stop="close()">
      <view class="relationalList">

        <personnelInformationCard :isOwnFlag="true" :addPersonnelInfo="addPersonnelInfo"></personnelInformationCard>
        <personnelInformationCard :info="{
          name:'父亲',
          sex:1,
          val:6,
          head:fuqinHead
        }" :isOwnFlag="false" class="father" @addMember="addMember"
                                  v-if="relationshipsThatCanBeAdded.some(item => item.val == 6)"></personnelInformationCard>
        <personnelInformationCard :info="{
          name:'母亲',
          sex:2,
          val:7,
          head:muqinHead
        }" :isOwnFlag="false" class="mother" @addMember="addMember"
                                  v-if="relationshipsThatCanBeAdded.some(item => item.val == 7)"></personnelInformationCard>
        <personnelInformationCard :info="{
          name:'妻子',
          sex:2,
          val:0,
          head:qiziHead
        }" :isOwnFlag="false" class="wife" @addMember="addMember"
                                  v-if="relationshipsThatCanBeAdded.some(item => item.val == 0)"></personnelInformationCard>
        <personnelInformationCard :info="{
          name:'丈夫',
          sex:1,
          val:1,
          head:zhifuHead
        }" :isOwnFlag="false" class="wife" @addMember="addMember"
                                  v-if="relationshipsThatCanBeAdded.some(item => item.val == 1)"></personnelInformationCard>
        <personnelInformationCard :info="{
          name:'哥哥',
          sex:1,
          val:2,
          head:gegeHead
        }" :isOwnFlag="false" class="elderBrother" @addMember="addMember"
                                  v-if="relationshipsThatCanBeAdded.some(item => item.val == 2)"></personnelInformationCard>
        <personnelInformationCard :info="{
          name:'弟弟',
          sex:1,
          val:3,
          head:didiHead
        }" :isOwnFlag="false" class="youngerBrother" @addMember="addMember"
                                  v-if="relationshipsThatCanBeAdded.some(item => item.val == 3)"></personnelInformationCard>
        <personnelInformationCard :info="{
          name:'姐姐',
          sex:2,
          val:4,
          head:jiejieHead
        }" :isOwnFlag="false" class="elderSister" @addMember="addMember"
                                  v-if="relationshipsThatCanBeAdded.some(item => item.val == 4)"></personnelInformationCard>
        <personnelInformationCard :info="{
          name:'妹妹',
          sex:2,
          val:5,
          head:meimeiHead
        }" :isOwnFlag="false" class="sis" @addMember="addMember"
                                  v-if="relationshipsThatCanBeAdded.some(item => item.val == 5)"></personnelInformationCard>
        <personnelInformationCard :info="{
          name:'儿子',
          sex:1,
          val:8,
          head:erziHead
        }" :isOwnFlag="false" class="son" @addMember="addMember"
                                  v-if="relationshipsThatCanBeAdded.some(item => item.val == 8)"></personnelInformationCard>
        <personnelInformationCard :info="{
          name:'女儿',
          sex:2,
          val:9,
          head:nverHead
        }" :isOwnFlag="false" class="daughter" @addMember="addMember"
                                  v-if="relationshipsThatCanBeAdded.some(item => item.val == 9)"></personnelInformationCard>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.selectPeoplePopupWindow {
  width: 750rpx;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(40rpx);
}

.relationalList {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
}

.father {
  position: absolute;
  top: -166rpx;
  left: -35rpx;
}

.mother {
  position: absolute;
  top: -166rpx;
  right: -35rpx;
}

.wife {
  position: absolute;
  top: 24rpx;
  left: -103rpx;
}

.elderBrother {
  position: absolute;
  top: 24rpx;
  left: 134rpx;
}

.youngerBrother {
  position: absolute;
  top: 24rpx;
  left: 237rpx;
}

.elderSister {
  position: absolute;
  top: 24rpx;
  left: 340rpx;
}

.sis {
  position: absolute;
  top: 24rpx;
  left: 443rpx;
}

.son {
  position: absolute;
  top: 237rpx;
  left: -35rpx;
}

.daughter {
  position: absolute;
  top: 237rpx;
  right: -35rpx;
}
</style>